<template>
	<view>
		<view class="wdjf">
			<view class="lefts">
				{{jf}}<text class="jf_tip">积分</text>
			</view>
			<view class="rights" @click="jfzd">
				账单 >
			</view>
		</view>
		<view style="width: 100%; height: 84rpx;"></view>
		<mescroll-body ref="mescrollRef" @down="downCallback" @up="upCallback">
			<view v-if="!isLoading && isError == false">
				<view class="swiper-box">
					<swiper
						:circular="true"
						:indicator-dots="swiper.indicatorDots" 
						:autoplay="swiper.autoplay" 
						interval="5000"
						:duration="swiper.duration"
						indicator-active-color="#1b43c4"
					 >
						<swiper-item 
							class="have-none" 
							v-for="(image, index) in images" 
							:key="index"
							@click="sliderJump(image.url)"
						>
							<image 
							 :src="image.photo" 
							 mode="scaleToFill"
							 ></image>
						</swiper-item>
					</swiper>
				</view>
				<view class="search-box">
					<view class="iconfont search-input" @click="onJumpSearch">
						<text>请输入关键字</text>
					</view>
				</view>
				<view class="grid-box">
					<view class="grid-box-item" @click="catJump(0)">
						<view class="grid-box-item-img">
							<image :src="all_category"></image>
						</view>
						<text class="grid-box-item-text">全部</text>
					</view>
					<view
						class="grid-box-item"
						v-for="(value,i) in category"
						:key="i"
						@click="catJump(value.id)"
					>
						<view class="grid-box-item-img">
							<image :src="value.image"></image>
						</view>
						<text class="grid-box-item-text">{{ value.name }}</text>
					</view>
				</view>
				<view style="width: 100%; height: 20rpx;"></view>
				<view class="goods-list">
					<view class="goods-list-box">
						<view class="goods-list-item-box"
							 v-for="(item,index) in list"
							 :key="index"
							 @click="$utils.navigateTo('goods/view',{ id: item.id })"
						>
							<view class="goods-list-item-wrap">
								<view><image :src="item.photo"></view>
								<view>{{ item.title }}</view>
								<view>{{ item.price }}<text class="jf_tip">积分</text></view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</mescroll-body>
		<copyright></copyright>
		<empty-box type="service" v-if="isError && isLoading == false" @onEvents="onJump"></empty-box>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import loading from '../../components/tool/loading';
	import {checkPlatformAgent} from '../../common/check.js';
	
	export default {
		mixins: [MescrollMixin],
		components:{
			loading
		},
		data() {
			return {
				swiper: {
					indicatorDots: true,
					autoplay: true,
					duration: 500,
				},
				all_category: '../../static/images/all_category.png',
				isNavbar: false,
				isPlaceholder: false,
				isNavTitle: false,
				isLoading:true,
				isError: false,
				navTitle: "",
				result: [],
				goods: [],
				images: [],
				img_1: [],
				img_2: [],
				hot: [],
				recommend: [],
				notice: [],
				list: [],
				type: 1,
				menuTop: 0,
				wHeight:0,
				tabindex:'item-0',
				menuIndex:'menu-0',
				currentIndex: 0,
				category: [],
				goodsHeight: [],
				menuHeight: [],
				jf: 0,
				shops: [],
				param: {
					type: 2,
					sort: 1,
					page: 1,
					ud: 0,
					pageType: 1
				}
			}
		},
		mounted() {
			let menuClientRect = { height: 35, searchHeight: 0 };
			let systemInfoSync = uni.getSystemInfoSync();
			
			let statusBar = 0;
			// #ifdef MP || APP-PLUS
			statusBar = systemInfoSync.statusBarHeight;
			// #endif
			
			// #ifdef MP
			menuClientRect = uni.getMenuButtonBoundingClientRect();
			// #endif
			
			// #ifdef APP-PLUS || MP
			menuClientRect.height += 10;
			// #endif
			
			let navHeight = menuClientRect.height + statusBar;
			
			// #ifdef H5
			this.wHeight = (systemInfoSync.screenHeight - navHeight - systemInfoSync.windowBottom) - 46;
			// #endif
			
			// #ifdef APP-PLUS
			this.wHeight = (systemInfoSync.windowHeight - navHeight - systemInfoSync.windowBottom) - 46;
			// #endif
			
			// #ifdef MP
			this.wHeight = (systemInfoSync.windowHeight - navHeight) - 46;
			// #endif
		},
		onLoad() {
			let platformAgent = this.$utils.platformAgent();
			this.isNavbar = true;
			this.isPlaceholder = true;
			this.navTitle = "首页"
			
			this.loadData()
			
			// #ifdef MP
			this.isNavTitle = true;
			// #endif
		},
		onShow() {
			this.$store.dispatch("usersStatus").then(()=>{
				this.$http.getUcenter().then((res)=>{
				    if(res.status){
				        this.jf = res.data.amount;
						this.param.ud = res.data.id
				    }
				});
			}).catch(()=>{
				// this.isAuthShow = true;
			});
			// #ifdef APP-PLUS
			// 隐藏顶部电池,时间等信息 
			plus.navigator.setFullscreen(true);
			//隐藏虚拟按键
			plus.navigator.hideSystemNavigation()
			// #endif
		},
		methods: {
			onJumpSearch(){
				this.$utils.navigateTo("search/index");
			},
			sliderJump(url){
				uni.navigateTo({
					url: url
				})
			},
			catJump(data){
				this.$utils.navigateTo('goods/list?id='+data);
			},
			jfzd(){
				this.$utils.navigateTo("bill/fund");
			},
			onMenu(i){
				this.currentIndex = i;
				this.tabindex = 'item-'+i;
				this.shops = this.category[i].children
			},
			onJump(){
				this.loadData();
			},
			loadData(params = {}){
				this.$http.getHomeData(params).then(res=>{
					if(res.status){
						this.result = [];
						this.images = res.data.banner;
						this.img_1 = res.data.img_1;
						this.img_2 = res.data.img_2;
						this.hot = res.data.hot;
						this.recommend = res.data.recommend;
						this.category = res.data.nav
						this.shops = res.data.nav[0].children
						this.isLoading = false;
						this.isError = false;
					}else{
						this.isLoading = false;
						this.isError = true;
					}
				}).catch(err=>{
					 this.isLoading = false;
					 this.isError = true;
				});
			},
			getGoodsData(){
				this.$http.getGoodsList(this.param).then((result)=>{
					this.mescroll.endByPage(result.data.list.length, result.data.total);
					if(result.status==1){
						if(this.param.page == 1) this.list = [];
						this.list = this.list.concat(result.data.list);
					}else if(result.status == -1){
						this.mescroll.endErr(); 
						this.mescroll.removeEmpty();
					}
				}).catch(error=>{
					this.mescroll.endErr();
					this.mescroll.removeEmpty();
				});
			},
			downCallback(){
				this.param.page = 1
				setTimeout(()=>{
					this.getGoodsData();
				},200);
			},
			upCallback(page){
				this.isLoading = false;
				this.param.page = page.num
				if (page.num > 1) {
					this.getGoodsData()
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.jf_tip {
		font-size: 24rpx;
		padding-left: 6rpx;
	}
	.wdjf {
		position: fixed;
		top: 0 !important;
		left: 0;
		right: 0;
		z-index: 99999;
		display: flex;
		justify-content: space-between;
		padding: 20rpx 20rpx;
		font-size: 30rpx;
		background-color: #fff;
		.lefts{
			font-size: 36rpx;
			font-weight: bold;
			color: #1b43c4;
		}
		.rights {
			padding-top: 6rpx;
		}
	}
	.search-box {
		width: 100%; height: 100rpx; padding-top: 10rpx;
		background-color: #f3f4f6;
		.search-input { 
			position: relative;
			color: #fff;
			height: 35px; line-height: 35px; border-radius: 50rpx;
			margin: 10rpx 20rpx; background-color: #fff; color: #666; 
			&::before {
				position: absolute;
				content: "\e629";
				left: 30rpx;
				top: 0rpx;
				font-size: 38rpx;
				color: #aaa;
			}
			text { padding-left: 90rpx; font-size: 30rpx; }
		}
	}
	.swiper-box{
		width: 100%; margin: 0 auto; 
		image {
			display: block;width: 100%;height: 300rpx;background-color: #fff;pointer-events: none;
		}
	}
    .notice-box {
    	padding: 0 30rpx;
    	height: 60rpx;
    	line-height: 60rpx;
    	position: relative;
    	.notice-icon {
    		font-size: 33rpx;
    		color: rgb(185, 25, 34);
    		float: left;
    		top: 1rpx;
    		position: absolute;
    	}
    	.notice-text {
    		font-size: 28rpx;
    		text-indent: 45rpx;
    		color: rgb(185, 25, 34);
    		white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    	}
    }
    .grid-box{
    	background: #fff;
    	display: flex;
    	flex-direction: row;
    	flex-wrap: wrap;
    	padding-top: 20rpx;
    	.grid-box-item { 
    		width: 25%;
    		height: auto !important;
    		height: 150rpx;
    		min-height: 150rpx;
    		text-align: center; 
    		.grid-box-item-img { 
    			display: block;
    			image {
    				width: 90rpx;
    				height: 90rpx;
    				border-radius: 50%;
    			}
    		}
    		.grid-box-item-text {
    			display: block;
    			font-size: 26rpx;
    			color: #666;
    			width: 100%;
    			overflow: hidden;
    			text-overflow: ellipsis;
    			white-space: nowrap;
    		}
    	}
    }
	.menu{
		width: 178rpx;
		float: left;
		background: #f3f4f6;
		view{
		  width: 100%;
		  text-align: center;
		  height: 100rpx;
		  line-height: 100rpx;
		  background: #f3f4f6;
		  font-size: 27rpx;
		  color: #333;
		  border-bottom: 1px solid #dadbdd;
		}
		view.active{
		  background: #fff; 
		}
	}
	.content{
	  float: right;
	  width: 552rpx;
	  padding: 0 10rpx;
	  .s-item{
	  	display: flex;
	  	align-items: center;
	  	height: 70rpx;
	  	padding-top: 8rpx;
	  	font-size: 28rpx;
	  	color: #333;
	  }
	  .goods-item {
		  &:last-child { padding-bottom: 100rpx; }
	  }
	  .t-list{
	  	display: flex;
	  	flex-wrap: wrap;
	  	width: 100%;
	  	background: #fff;
	  	padding-top: 12rpx;
	  	&:after{
	  		content: '';
	  		flex: 99;
	  		height: 0;
	  	}
	  }
	  .t-item{
	  	flex-shrink: 0;
	  	display: flex;
	  	justify-content: center;
	  	align-items: center;
	  	flex-direction: column;
	  	width: 176rpx;
	  	font-size: 26rpx;
	  	color: #666;
	  	padding-bottom: 20rpx;
	  	.children-text{
			text-align: center;
		}
	  	image{
	  		width: 140rpx;
	  		height: 140rpx;
	  	}
	  }
	}
    .host-box { width: 100%; height: 520rpx; background-color: #1b43c4; }
    .host-box .host-title { color: #fff; width: 92%; height: 90rpx; line-height: 90rpx; margin: 0 auto; }
    .host-box .host-title text:nth-child(1) { font-size: 32rpx; float: left; font-weight: bold; }
    .host-box .host-title text:nth-child(2) { position: relative; font-size: 26rpx; float: right; padding-right: 30rpx; }
    .host-box .host-title text:nth-child(2):after { position: absolute; right: 0; top: -1px; content: '>'; }
    .host-middle { overflow: hidden; padding-bottom: 20rpx; width: 92%; margin: 0 auto; background: #fff; border-radius: 10rpx; display: flex; justify-content: center; flex-wrap: nowrap; flex-direction: row; }
    .host-middle-box { width: 31%; padding: 0 1%; padding-top: 20rpx; text-align: center; }
    .host-middle-box view { display: block; width: 100%; font-size: 28rpx; }
    .host-middle-box view:nth-child(1) image { width: 220rpx; height: 220rpx; border-radius: 10rpx; }
    .host-middle-box view:nth-child(2) { height: 80rpx; display: -webkit-box;overflow: hidden;-webkit-line-clamp: 2;-webkit-box-orient: vertical; }
    .host-middle-box view:nth-child(3) { color: red; }
    .m-1{height: 200rpx;margin: 20rpx 0;}
    .m-1 image{display: block;width: 100%;height: 100%;}
    .image-wrap{
        width: 100%;
        height: auto;
        .image-group{
            float: left;
            box-sizing: border-box;
        }
    	image { width: 100%; height: 100%; }
    	.display { 
    		height: 0; width: 100%; margin: 0; padding-bottom: 50%; position: relative; 
    		.image-group-left { width: 40%; height: 100%; position: absolute; top: 0; left: 0; }
    		.image-group-right { 
    			width: 60%; height: 100%; position: absolute; top: 0; left: 40%; 
    			.image-group-right1 { width: 100%; height: 50%; position: absolute; top: 0; left: 0; }
    			.image-group-right2 { width: 100%; height: 50%; position: absolute; top: 50%; left: 0; }
    			.image-group-right2 .left { width: 50%; height: 100%; position: absolute; top: 0; left: 0; }
    			.image-group-right2 .right { width: 50%; height: 100%; position: absolute; top: 0; left: 50%; }
    		}
    	}
    	.image-group-2 .image-group { width: 50%; height: 150px; }
    	.image-group-3 .image-group { width: 33%; height: 150px; }
    	.image-group-4 .image-group { width: 25%; height: 150px; }
    }
    .goods-wrap{
        width: 100%;
        background-color: #fff;
        .goods-head{
            width: 100%;
            height: 100rpx;
            line-height: 100rpx;
			display: flex;
			justify-content: space-between;
			text-align: center;
            view{
                width: 92%;
                margin:0 auto;
				font-weight: bold;
                .l{
                    float: left;
                    font-size: 34rpx;
                    color: #333;
                }
                .r{
                    float: right;
                    font-size: 34rpx;
                    color: #888;
                }
            }
			.active {
				background-color: #1b43c4;
				color: #fff;
			}
        }
        .goods-list{
            width: 92%;
            margin: 0 auto;
            display: flex; flex-direction: row;flex-wrap: wrap;
            .goods-box { float: left; }
            .goods-image image { width: 100%; height: 100%; }
            .goods-box.column-1 {
                width: 100%;
                height: 230rpx;
                position: relative;
                background-color: #fff;
                margin-bottom: 20rpx;
                .goods-image {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 220rpx;
                    height: 230rpx;
                    text-align: center;
                    image { padding-top: 5%; width: 90%; height: 90%; }
                }
                .goods-detail{
                    padding-left: 230rpx;
                    .goods-name{
                        padding: 0 20rpx;
                        position: relative;
                        top: 20px;
                        color: #888;
                        font-size: 26rpx;
                        display: -webkit-box;overflow: hidden;-webkit-line-clamp: 2;-webkit-box-orient: vertical;
                    }
                    .goods-price{
                        padding: 0 20rpx;
                        position: relative;
                        top: 80rpx;
                        font-size: 26rpx;
                        color: #b91922;
                    }
                }
            }
            .goods-box.column-2 {
                width: 50%;
                margin-bottom: 20rpx;
                .goods-image {
                    height: 360rpx;
                }
                .goods-item-box{ background-color: #fff; height: auto; }
                &:nth-child(2n+1) .goods-item-box {
                    margin-left: 0px; margin-right: 10rpx;
                }
                &:nth-child(2n) .goods-item-box {
                    margin-left: 10rpx; margin-right: 0px;
                }
                span{ display: block }
                .goods-name{
                    margin: 10rpx 0;
                    padding: 0 10rpx;
                    font-size: 26rpx;
                    float: left;
                    display: -webkit-box;overflow: hidden;-webkit-line-clamp: 2;-webkit-box-orient: vertical;
                }
                .goods-price{
                    margin: 10rpx 0 20rpx 0;
                    padding: 0 20rpx;
                    font-size: 28rpx; color: #b91922;
                    float: left;
                }
            }
            .goods-box.column-3 {
                width: 33.333%;
                margin-bottom: 20rpx;
                .goods-image {
                    height: 220rpx;
                }
                .goods-item-box{ background-color: #fff; height: auto; }
                &:nth-child(2n+1) .goods-item-box {
                    margin-left: 10rpx; margin-right: 10rpx;
                }
                &:nth-child(2n) .goods-item-box {
                    margin-left: 10rpx; margin-right: 10rpx;
                }
                span{ display: block }
                .goods-name{
                    margin: 10rpx 0;
                    padding: 0 10rpx;
                    font-size: 26rpx;
                    float: left;
                    display: -webkit-box; overflow: hidden;-webkit-line-clamp: 2;-webkit-box-orient: vertical;
                }
                .goods-price{
                    margin: 10rpx 0 20rpx 0;
                    padding: 0 20rpx;
                    font-size: 28rpx; color: #b91922;
                    float: left;
                }
            }
            &.goods-3 { width: 96%; }
        }
        .goods-slider-list {
            background-color: #fff;
            display: flex; flex-wrap: wrap; flex-direction: row; font-size: 28rpx;
        }
        .goods-slider-item { float: left; width: 246rpx; margin-left: 20rpx; margin-top: 20rpx; }
        .goods-slider-item view { display: block; }
        .goods-slider-item view:nth-child(1) { height: 260rpx; }
        .goods-slider-item view:nth-child(1) image { width: 100%; height: 260rpx; display: block; }
        .goods-slider-item view:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .goods-slider-item view:nth-child(3) { color: red; font-size: 32rpx; }
    }
    .goods-list-box{ width: 100%;display: flex; flex-direction: row;flex-wrap: wrap; }
    .goods-title{ color: #666; width: 100%; height: 100rpx; line-height: 100rpx; text-align: center; font-size: 34rpx; font-weight: bold; }
    .goods-title:before { content: "::"; position: relative; top: -2rpx; left: -4rpx; font-size: 36rpx; }
    .goods-title:after { content: "::"; position: relative; top: -2rpx; right: -4rpx; font-size: 36rpx; }
    .goods-list-item-box{width: 50%; margin-bottom: 20rpx; }
    .goods-list-item-box:nth-child(2n+1) .goods-list-item-wrap { margin-left: 20rpx; margin-right: 10rpx; }
    .goods-list-item-box:nth-child(2n) .goods-list-item-wrap { margin-left: 10rpx; margin-right: 20rpx; }
    .goods-list-item-wrap{ height: 520rpx; background: #fff; border-radius: 20rpx; }
    .goods-list-item-wrap view { display: block; }
    .goods-list-item-wrap view:nth-child(1) { height: 370rpx; }
    .goods-list-item-wrap view:nth-child(1) image { padding: 20rpx 5%; width: 90%; height: 330rpx; }
    .goods-list-item-wrap view:nth-child(2) { font-size: 28rpx; padding: 0 20rpx; height: 80rpx; display: -webkit-box;overflow: hidden;-webkit-line-clamp: 2;-webkit-box-orient: vertical; }
    .goods-list-item-wrap view:nth-child(3){ font-size: 36rpx; padding: 10rpx; color: red; padding-left: 24rpx; }
</style>